<!--班车列表页-->
<template>

    <div style="height: 100%;">
        <!--<el-container class="layout-container">
            <el-header class="layout-header">
                <div class="h-left">
                    <el-button type="primary">新增</el-button>
                </div>
                <div class="h-right">
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="default" @click="reset">重置</el-button>
                </div>
            </el-header>
            <el-main class="layout-main">
                &lt;!&ndash;搜索条件&ndash;&gt;
                <m-condition ref="conditionRef" :fields="queryList" class="condition-wrap" @resize="setTableHeight"/>
                &lt;!&ndash;表格&ndash;&gt;
                <div class="table-wrap" ref="tableRef">
                    <el-table
                            class="table-auto"
                            :height="tableHeight + 'px'"
                            border
                            :data="tableData"
                            empty-text="暂无数据"
                    >
                        <el-table-column v-for="item in cols" :prop="item.prop" :label="item.label" min-width="130" />

                        <el-table-column fixed="right" label="操作" width="160">
                            <template #default="scope">
                                <el-button link type="primary" @click="handleClick(scope,'cancel')">查看</el-button>
                                <el-button link type="danger" @click="handleClick(scope,'edit')">删除</el-button>
                                <el-button link type="warning" @click="handleClick(scope,'del')">复制</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </el-main>
            <el-footer class="layout-footer">
                &lt;!&ndash;统计&ndash;&gt;
                <div class="total-wrap">
                    统计：
                    <div class="total-item">
                        <span class="item-label">座位总数</span>
                        <span class="item-value">100</span>
                    </div>
                    <div class="total-item">
                        <span class="item-label">售票数量</span>
                        <span class="item-value">100</span>
                    </div>
                    <div class="total-item">
                        <span class="item-label">售票金额</span>
                        <span class="item-value">100</span>
                    </div>


                </div>
                &lt;!&ndash;分页&ndash;&gt;
                <div class="page-wrap">
                    <m-page
                            v-model:current-page="currentPage"
                            v-model:page-size="pageSize"
                            :total="total"
                    />
                </div>

            </el-footer>
        </el-container>-->
        <m-page-list
                :option="option"
                :page="page"
                :total="total"
                :table-data="tableData"
                :table-loading="tableLoading"
                :page-loading="pageLoading"
                v-model:value="query"
                @h-btn-click="hBtnClick"
                @col-btn-click="colBtnClick"
                @search-data="searchData"
        >
            <template #rightBtn v-if="publicAllAuth">
                <el-tooltip placement="bottom" effect="light">
                    <el-button type="primary" @click="publicAll">全量更新缓存</el-button>
                    <template #content>
                        <div style="">请不要在抢票期间使用</div>
                    </template>
                </el-tooltip>
            </template>
        </m-page-list>
        <m-dialog-form ref="dialogRef" :data="dialogData" v-model:show="dialogShow" :option="dialogOption" @confirm="dialogConfirm" ></m-dialog-form>

        <el-dialog class="dialog-wrap" v-model="mShow" width="95%" title="查看" :close-on-click-modal="false" draggable align-center destroy-on-close>
            <shuttle-detail style="height: 90vh;" class="dtl-wrap" :data="data" @save="getDataList"></shuttle-detail>
        </el-dialog>


        <m-dialog-form ref="mDialogRef" v-model:show="mDialogShow" :option="mDialog" @confirm="copyShuttle_" ></m-dialog-form>
    </div>

</template>

<script setup>

  import {ref,h,reactive,onMounted,nextTick} from 'vue'
  import {ElSwitch} from 'element-plus'
  import {useRouter} from 'vue-router'
  //组件
  import MPageList from '@/components/PageList'
  import MDialogForm from '@/components/DialogForm/DialogForm'
  import ShuttleDetail from './ShuttleDetail'
  //请求
  import {getShuttle, addShuttle,copyShuttle, editShuttle, delShuttle,publicAllData,getSchool,getTicketPackageLabel} from '@/request/api/basicData'

  import {usePageList} from "../../composables/pageList";
  import {refOpt} from "../const";
  import {getAuthority} from "../../utils/permission";

  const router = useRouter();

  let opts = {
    pageSize: 10,
    auth_id: 'shuttle',
    getApi: getShuttle,addApi:addShuttle,editApi:editShuttle,delApi:delShuttle,
    idKey: 'shuttle_id',
    confirmCallback: (data) => publicAllData(data.shuttle_seat_id || data.shuttle_id),
    deleteCallback: (data) => publicAllData(data.shuttle_seat_id || data.shuttle_id),
    baseQuery: {orderBy: 'shuttle_id desc',returnAggregate: true},
    total: [
      {title: '班次数',field_id:'bcs', value: 0},
      {title: '座位总数',field_id:'zws', value: 0},
      {title: '去程售票数',field_id:'ysps_sx', value: 0},
      {title: '回程售票数',field_id:'ysps_fx', value: 0},
      {title: '往返售票数',field_id:'ysps_wf', value: 0},
    ]
  };
  let {option,page,total,tableLoading,pageLoading,tableData,query,dialogRef,dialogShow,dialogData,dialogOption,
    isAppend,hBtnClick,colBtnClick,searchData,getDataList,dialogConfirm} = usePageList(opts);

  option.showTotal = true;
  option.showOverflowTooltip = false;
  option.conditions = [
    {label: '班车编号',type: 'text',field_id: 'shuttle_id',col: 12},
    {label: '班车名称',type: 'text',field_id: 'name',col: 12},
    // {label: '客户名称',type: 'text',field_id: 'customer_id'},
    // {label: '客户编号',type: 'text',field_id: 'customer_name'},
    // {label: '套票标签',type: 'text',field_id: 'contains_packag_label_name'},
    {label: '班车类型',field_id: 'shuttle_type',type: 'picklist',options: [{name: '车站客运班车',id: '车站客运班车'},{name: '定制',id: '定制'},],col: 8},
    {...refOpt.packag_label_name,label: '套票标签',col: 8,rewriteInput: true},
    {...refOpt.school_name,col: 8,rewriteInput: true},
  ];
  option.colBtns.shift();
  /*option.colBtns.unshift(
    {title: '查看',id: 'detail',type: 'primary',event: checkDetail},
    {title: '订单',id: 'orders',type: 'primary',event: checkOrders},
    {title: '复制',id: 'copy',type: 'warning',event: handleShowCopy},
  );*/

  option.cols = [
    {prop: 'packag_label_name',label: '套票标签',fixed: 'left',width: 100 },
    {prop: 'shuttle_name',label: '班车名称',fixed: 'left',width: 100 },
    {prop: 'shuttle_type',label: '班车类型' },
    {prop: 'packages_price',label: '套票票价',width: 200,templte:(scope) =>{
        let {packages_price} = scope.row,
          arr = packages_price && packages_price.split(';');
        return arr ? arr.join('<br>') : ''
      } },
    {prop: 'seat_sold',label: '座位已售',width: 100,templte:(scope) =>{
        let {seat_sold} = scope.row,
          arr = seat_sold && seat_sold.split(';');
        return arr ? arr.join('<br>') : ''
      } },
    {prop: 'seat_unsold',label: '座位未售',width: 100,templte:(scope) =>{
        let {seat_unsold} = scope.row,
          arr = seat_unsold && seat_unsold.split(';');
        return arr ? arr.join('<br>') : ''
      }  },
    {prop: 'order_count',label: '售出人数' },
    {prop: 'sell_dateime_start',label: '开售时间起' },
    {prop: 'sell_dateime_end',label: '开售时间止' },
    {prop: 'seat_total',label: '座位总数' },
    {prop: 'shuttle_id',label: '班车编号' },
    {prop: 'school_name',label: '站点名称' },
    {prop: 'service_period',label: '服务时段' },
    {prop: 'shuttle_seat_name',label: '班车座位表名称' },
    {prop: 'effective_time_start',label: '班车有效时间起' },
    {prop: 'effective_time_end',label: '班车有效时间止' },
    {prop: 'operation_group_id',label: '营运组编号' },
    {prop: 'operation_group_name',label: '营运组名称' },
    {prop: 'input_name',label: '录入员名' },
    {prop: 'input_time',label: '录入时间' },
    {prop: 'modify_name',label: '修改员名' },
    {prop: 'modify_time',label: '修改时间' },
    {prop: 'is_used',label: '使用标识',type: 'bool',fixed: 'right',component: ElSwitch,attrs:(scope)=> {
        return {
          'modelValue': scope.row.is_used,
          'onChange': (val) => isUsedChange(val,scope),
        }},
      /*templet: (scope) =>{
          let row = scope.row,
            {is_used} = row;
        return h(
          ElSwitch, {
            'model-value': is_used,
            onChange: isUsedChange,
          },)
        }*/
    },
  ];
  /*比高 肯德基 帕尼尼 */
  dialogOption.fieldList = [
    {label: '班车编号',field_id: 'shuttle_id',type: 'text',col: 2, required: true},
    {label: '班车名称',field_id: 'shuttle_name',type: 'text',col: 2, required: true},
    {label: '班车内部编号',field_id: 'inside_shuttle_id',type: 'text',col: 2},
    {label: '班车类型',field_id: 'shuttle_type',type: 'picklist',options: [{label:'车站客运班车',value:'车站客运班车'},{label:'定制',value:'定制'}],defaultValue:'车站客运班车',col: 2 },

    {...refOpt.packag_label_id,col:2},
    {...refOpt.packag_label_name,editDisabled: true,col:2},

    {label: '说明',field_id: 'mark',type: 'textarea',col: 4},
    {label: '服务时段',field_id: 'service_period',type: 'text',col: 2},
    {label: '座位总数',field_id: 'seat_total',type: 'number',col: 2,precision: 4},
    {...refOpt.shuttle_seat_id,col: 2},
    {...refOpt.shuttle_seat_name,col: 2},
    {label: '开售时间起',field_id: 'sell_dateime_start',type: 'datetime',col: 2},
    {label: '开售时间止',field_id: 'sell_dateime_end',type: 'datetime',col: 2},
    {label: '优先购票分钟',field_id: 'priority_minute',type: 'number',col: 2 },
    {col: 2},
    {label: '班车有效时间起',field_id: 'effective_time_start',type: 'datetime',col: 2},
    {label: '班车有效时间止',field_id: 'effective_time_end',type: 'datetime',col: 2},
    {...refOpt.operation_group_id,col: 2},
    {...refOpt.operation_group_name,col: 2},
    {label: '使用标识',field_id: 'is_used',type: 'bool',col: 2},
    {label: '群二维码',field_id: 'group_qrcode',type: 'picture',limit: 1,col: 2},
    // {label: '测试',field_id: 'ceshi',type: 'picklist',col: 2,options: [{label:1,value:2}]},
  ];

  let publicAllAuth = ref(false);

  prepare();
  let mShow = ref(false),
    data = ref({});
  function checkDetail(scope,id) {
    /*router.push({
      name: 'shuttleDetail' ,params: {id: '001'}
    })*/
    mShow.value = true;
    data.value = scope.row;
  }
  function checkOrders(scope) {
    router.push({
      path: '/order' ,query: {shuttle_id: scope.row.shuttle_id}
    })
  }

  function isUsedChange (val,scope){
    let {is_used,shuttle_id,shuttle_seat_id} = scope.row;
    if (is_used === val) return;
    tableLoading.value = true;
    editShuttle({is_used: val,shuttle_id}).then(res => {
      if (res.errcode !== 0) return;
      ElMessage({type: 'success',message: '修改成功'});
      let data = tableData.value;
      data[scope.$index].is_used = val;
      tableData.value = data;
      publicAllData(shuttle_seat_id || shuttle_id);
      tableLoading.value = false;
    })
  }


  let mDialog = ref({
    title: '复制班车',
    fieldList: [
      {label: '班车编号',field_id: 'shuttle_id',type: 'text',col: 3,required: true},
      {label: '班车名称',field_id: 'shuttle_name',type: 'text',col: 3,required: true},
    ]
    }),
    mDialogShow = ref(false),
    mDialogRef = ref(null),
    copyId = '';
  function handleShowCopy(scope) {
    if (!isAppend.value){
      ElMessage({
        type: 'warning',
        message: '抱歉，您没有权限新增该模块数据'
      })
      return
    }
    let {shuttle_id,shuttle_name} = scope.row;
    copyId = shuttle_id;
    mDialog.value = {...mDialog.value,title: `复制班车 ${shuttle_name}`}
    mDialogShow.value = true
  }
  //复制班车
  function copyShuttle_(obj) {
    let {data,option} = obj;
    copyShuttle(copyId,data).then(res => {
      if (res.errcode !== 0)return;
      mDialogRef.value.close();
      ElMessage({
        type: 'success',
        message: '复制成功'
      })
      getDataList();
      let row = res.row[0] || {},
        {shuttle_seat_id,shuttle_id} = row;
      publicAllData(shuttle_seat_id || shuttle_id)
    })
  }

  //全量更新
  function publicAll() {
    pageLoading.value = true;
    publicAllData().then(res => {
      if (res.errcode != 0) return;
      pageLoading.value = false;
      ElMessage({
        type: 'success',
        message: '已更新'
      })

    })
  }

  function prepare() {
    let arr = [{title: '查看',id: 'detail',type: 'primary',event: checkDetail},
      {title: '订单',id: 'orders',type: 'primary',event: checkOrders},]
    isAppend.value && arr.push({title: '复制',id: 'copy',type: 'warning',event: handleShowCopy})
    option.colBtns.unshift(...arr)

    let PublicAll = getAuthority('PublicAll');
    publicAllAuth.value = PublicAll && PublicAll.is_see;
  }
</script>

<style scoped lang="less">
    @import '../../assets/css/pageList.less';

    .dtl-wrap{
        ::v-deep{
            &.layout-container{
                border-top: 1px solid #e6e6e6;
            }
        }
    }

</style>
